<template>
    <div class="base-container">
        <div class="c--header w-100">
            <div class="h--module">
                <!-- logo -->
                <div class="m--logo">
                    <h3 style="color:#fff">基础组件库</h3>
                </div>
                <!-- 模块导航 -->
                <el-menu
                        class="module-menu"
                        mode="horizontal"
                        :default-active="currentModule"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        @select="handleSelect"
                >
                    <template v-for="(item, ins) in moduleList">
                        <el-menu-item :key="ins" :index="item.value">{{ item.label }}</el-menu-item>
                    </template>
                </el-menu>
            </div>
        </div>
        <div class="c--body w-100">
            <div class="b--menu h-100">
                <el-menu
                        class="h-100"
                        :default-active="currentMenu"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        @select="handleGoTo"
                >
                    <template v-for="(item, ins) in menuList">
                        <template v-if="item.groups">
                            <el-menu-item-group :key="ins" :title="item.group">
                                <template v-for="m in item.groups">
                                    <el-menu-item class="group--menu-item" :key="m.value" :index="m.value">{{ m.label }}</el-menu-item>
                                </template>
                            </el-menu-item-group>
                        </template>
                        <template v-else>
                            <el-menu-item :key="ins" :index="item.value">{{ item.label }}</el-menu-item>
                        </template>
                    </template>
                </el-menu>
            </div>
            <div class="b--content h-100">
                <div class="c--scroll">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { menus } from "../utils/dynamic";
    import {module,menu as defaultMenu}  from "../config/menu"
    export default {
        name: "basic-container",
        data: () => ({
            moduleList: module,
            currentModule: "",
            currentMenu: "",
        }),
        computed: {
            menuList() {
                let res = [];
                let groupIndex = {};
                const dks = Object.keys(defaultMenu)
                const md = this.currentModule;
                if(dks.indexOf(md) !== -1){
                    return defaultMenu[md].children
                }
                menus.forEach((m) => {
                    if (m.module == md) {
                        const module = m.module;
                        const label = m.label;
                        const value = m.value;
                        const mg = m.group;
                        const gi = groupIndex[mg] > -1?groupIndex[mg] : -1;
                        let json = { module };
                        if (!mg) {
                            json = { module, label, value };
                        }
                        if (mg && gi == -1) {
                            json = { module, label: mg, group: mg, groups: [{ module, label, value }] };
                            groupIndex[mg] = res.length;
                        }
                        if (mg && gi > -1) {
                            json = undefined;
                            res[gi].groups.push({ module, label, value });
                        }
                        if(json){
                            res.push(json);
                        }

                    }
                });
                return res;
            },
        },
        methods: {
            handleSelect(k) {
                if (this.currentMenu === k) {
                    return;
                }
                this.currentModule = k;
                const ml = this.menuList;
                if (ml.length > 0) {
                    const fn = this.utilGetPath(ml);
                    this.handleGoTo(fn);
                }
            },
            handleGoTo(p) {
                if (!p || this.currentMenu === p) {
                    return;
                }
                this.currentMenu = p;
                this.$router.push(p);
            },
            utilGetPath(list = []){
                if(list.length == 0 ){
                    return undefined
                }
                let item = list[0]
                if(item.groups && item.groups.length > 0){
                    item = item.groups[0]
                }
                if(item.value){
                    return item.value
                }
                return undefined
            }
        },
        mounted() {
            setTimeout(() => {
                const path = this.$route.path;
                if(this.currentMenu !== path && path){
                    this.currentModule = path.split('-')[0].split('/')[1]
                    this.currentMenu = path;
                }
            },0)

        },
    };
</script>

<style scoped lang="scss">
    .base-container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        .w-100 {
            width: 100%;
        }
        .h-100 {
            height: 100%;
        }
        >.c--header {
            > .h--module {
                height: 61px;
                box-sizing: border-box;
                border-bottom: 1px solid #fff;
                display: flex;
                align-items: center;
                background: rgb(84, 92, 100);
                .m--logo {
                    margin: 0 2em;
                }
                .module-menu {
                    border: none;
                }

            }
        }
        >.c--body {
            display: flex;
            height: calc(100vh - 61px);
            >.b--menu {
                width: 200px;
                min-width: 200px;
                .group--menu-item{
                    margin-left:1em;
                }
            }
            >.b--content {
                flex: 1;
                overflow: hidden;
                .c--scroll {
                    // margin: 20px 0;
                    padding:20px 20px;
                    height: calc(100% - 40px);
                    overflow: auto;
                    /deep/ .e--fire-switch{
                        bottom:-20px;
                    }
                }
            }
        }
    }
</style>
